<template>
  <div v-resize="resizeTest" class="content" id="resize">
    <a href="https://vitejs.dev" target="_blank">
      <img src="./assets/vite.svg" class="logo" alt="Vite logo" />
    </a>

    <a href="https://vuejs.org" target="_blank">
      <img src="./assets/vue.svg" class="logo" alt="Vue logo" />
    </a>
  </div>
</template>

<script setup lang="ts">
// 需求
/* 
  实现一个函数同时支持 hook 和 自定义指令 去监听dom宽高的变化

  5w3h  八何分析法
  1.如何监听dom的宽高变化
  2.如何用vite打包库
  3.如何发布npm

  具体步骤如下：
  1.在src目录下创建一个index.ts文件(具体内容在utils目录下的index.ts文件)
  2.在根目录下pnpm init 初始化一个项目 生成package.json文件
  3.tsc --init 生成tsconfig.json文件
  4.在根目录下创建一个vite.config.ts文件 配置vite打包(具体内容在根目录下的vite.config02.ts文件)
  5.在根目录下创建一个index.d.ts文件 暴露一个函数
  6.在根目录下pnpm i vue -D   引入vue
  7.在根目录下pnpm i vite -D  引入vite
  8.在package.json文件，"scripts"对象里面写入"build": "vite build"
  9.编写index.d.ts文件，用于发布npm
  10.在package.json文件里面写入"main": "dist/vite-resize-project.umd.js"    // require使用
  11.在package.json文件里面写入"module": "dist/vite-resize-project.mjs"     // import使用
  12.在package.json文件里面写入"files": ["dist", "index.d.ts"]
  13.在根目录下npm adduser // 注册npm
  14.在根目录下npm login // 登录npm
  15.在根目录下npm publish // 发布npm   vite-resize-project  每次变更需要改一次版本号
*/
/* import {
  onMounted
} from "vue"
import useResize from "vite-resize-project"

onMounted(() => {
  useResize(document.querySelector("#resize") as HTMLElement, (e:any) => {
    console.log(e)
  })
}) */

const resizeTest = (e: any) => {
  console.log("resizeTest", e)
}
</script>

<style lang="less">
.content {
  width: 300px;
  height: 300px;
  margin: 30px auto;
  border: 1px solid #ddd;
  resize: both;
  overflow: hidden;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
</style>